<div th:fragment="control_chart_calendar">
<script type="text/javascript">
function getInitDate(){
	
}
var dateList = getCalendarDate();
		var heatmapData = [];
		var lunarData = [];
		for (var i = 0; i < dateList.length; i++) {
		    heatmapData.push([
		        dateList[i][0],
		        Math.random() * 300
		    ]);
		    lunarData.push([
		        dateList[i][0],
		        1,
		        dateList[i][1],
		        dateList[i][2]
		    ]);
		}

	// 示例数据
	var get_calendar_option = function()
	{
		return {
			 tooltip: {
				 
				        formatter: function (params) {
				            return '降雨量: ' + params.value[1].toFixed(2);
				        }
			    },
			    visualMap: {
			        show: false,
			        min: 0,
			        max: 300,
			        calculable: true,
			        seriesIndex: [1],
			        orient: 'horizontal',
			        left: 'center',
			        bottom: 20,
			        inRange: {
			            color: ['#e0ffff', '#006edd'],
			            opacity: 0.3
			        },
			        controller: {
			            inRange: {
			                opacity: 0.5
			            }
			        }
			    },
		    calendar: [{
		    	width:500,
		        left: 'center',
		        top: 'middle',
		        cellSize: [50, 45],
		        yearLabel: {show: false},
		        orient: 'vertical',
		        dayLabel: {
		            firstDay: 1,
		            nameMap: 'cn'
		        },
		        monthLabel: {
		            show: true
		        },
		        range: '2017-05'
		    }],
			series : [],
			sql : ""
		
	}
	}

	/** 日历图元数据 */
	function metadata_calendar(params)
	{
		var series = [{
	        type: 'scatter',
	        coordinateSystem: 'calendar',
	        symbolSize: 1,
	        itemStyle: {
	        	color: 'red'
	        },
	        label: {
	            normal: {
	                show: true,
	                formatter:function (params) {
	                    
	                    var d = echarts.number.parseDate(params.value[0]);
	                    
	                    return d.getDate() + '\n\n' + params.value[2] + '\n';
	                },
	                textStyle: {
	                	 color: '#000',
	                	 fontSize: 6
	                }
	            }
	        },
	        data: lunarData
	    },  {
	        name: '降雨量',
	        type: 'heatmap',
	        coordinateSystem: 'calendar',
	        data: heatmapData
	    }]
		var opt = get_calendar_option();// 每个视图创建新的option，防止相互污染
		opt.series=series;
		//opt.series[0].label.normal.formatter=calendarformatter(params);
		params = $.extend({}, {
			DATASET : {
				series : series
			},
			OPTION : opt
		}, params);
		return $.extend(new metadata_chart_base(params), this);
	}
	/** 雷达图 元数据视图 面板视图 */
	function metadata_view_calendar(control)
	{
		this.DATASET = function()
		{
			var view = $($("#DATASET").html());
			var _this = this;
			var option = this.control.getMetadata("OPTION");
			var seriesData = $.extend({}, this.control.getMetadata("DATASET").series);
			var series = option.series, sql = option.sql;

			var setDataSetDetail = function(s)
			{
				var name = s.data[0].name, column = s.column;
				var detail_view = $($("#DATASET_DETAIL_CALENDAR").html());
				detail_view.find("input[name=title]").val(name);
				detail_view.find("input[name=column]").val(column);
				return detail_view;
			}
			var getDataSetDeatil = function()
			{
				option.legend.data = [];
				option.sql = $(view).find("textarea").val();
				$(view).find(".dataset_detail").each(function(i, item)
				{
					var n = $(item).find("input[name=title]").val();
					var c = $(item).find("input[name=column]").val();
					
					var v = option.series[i].data[0].value;
					
					$.extend(option.series[i], {
						column : c,
						data : [{
							name : n,
							value : v
						}]
					});
					option.legend.data.push(n);
				});
			}

			$(view).find("textarea").val(sql);
			for ( var i in series)
			{
				$(view).append(setDataSetDetail(series[i]));
			}
			//增加按钮
			view.find(".add-btn").click(function()
			{
				var p = $.extend({}, seriesData);
				option.series.push(p);
				$(view).append(setDataSetDetail(p));
				_this.linkViewOption(option);
			});
			//系列名、字段名
			view.on("keyup", "input,textarea", function()
			{
				getDataSetDeatil();
				_this.linkViewOption(option);
			});
			//SQL执行按钮
			view.on("click", ".sql-btn", function()
			{
				var sql = $(view).find("textarea").val();
				queryChartBySql(sql, "calendar", function(result)
				{
					try
					{
						if (result.state == "true")
						{
							option.legend.data = result.legend;
							for(var i in series){
								series[i].data = result[series[i].column];
							}
							_this.linkViewOption(option);
						} else
						{
							$.QuickAlert.alertFail({
								content : result.faultInfo
							});
						}
					} catch (e)
					{
						console.error(e);
					}
				});
			});
			//删除按钮
			view.on("click", ".delete-btn", function()
			{
				var index = $(this).index(".delete-btn");
				option.series.splice(index, 1);
				$(this).parents(".dataset_detail").remove();
				_this.linkViewOption(option);
			});
			$(this.settingPanel).append(view);
		}

		return $.extend(new metadata_view_chart_base(control), this);
	}

	/** 雷达图 表单视图 */
	function metadata_form_view_calendar(control)
	{
		this.control = control;
		this.echart = echarts.init($(control).find(".echarts-div")[0]);
		return $.extend(new metadata_form_view_chart_base(control), this);
	}
</script>


<!-- 控制面板 图表 dataSet详细配置 -->
<script type="text/html" id="DATASET_DETAIL_CALENDAR">
<div class="dataset_detail">
	<table class="setting-control-table">
		<tr>
			<td class="setting-control-label">名称</td>
			<td><input name="title" class="form-control"></td>
			<td class="setting-control-label">字段</td>
			<td><input name="column" class="form-control"></td>
			<td>
				<a href="javascript:;" class="btn btn-default btn-sm delete-btn">删除</a>
			</td>
		</tr>
	</table>
</script>
</div>